import React, { Component } from 'react'
import {Card, Breadcrumb, Divider, message, Table, Tag} from 'antd'
import { getRights } from '../../../api/right'
export default class RightList extends Component {
  state = {
    rightList:[],
    rightColumns:[
      {
        title: '',
        align: 'center',
        dataIndex: 'index',
        key:'index',
        render: (text,record,index) => {
          return index + 1
        }
      },
      {
        title: '权限名称',
        align: 'center',
        dataIndex: 'authName',
        key:'authName'
      },
      {
        title: '权限路径',
        align: 'center',
        dataIndex: 'path',
        key:'path'
      },
      {
        title: '权限等级',
        align: 'center',
        dataIndex: 'level',
        key:'level',
        render: (text,record) => {
          switch(record.level){
            case '0': return <Tag color="processing">一级</Tag>
            case '1': return <Tag color="success">二级</Tag>
            case '2': return <Tag color="warning">三级</Tag>
          }
        }
      }
    ]
  }
  getRightList = async (type) => {
    const res = await getRights(type);
    if(res.meta.status !== 200){
      message.error(res.meta.msg)
    }else{
      this.setState({
        rightList: res.data
      })
    }
  }
  componentDidMount() {
    this.getRightList('list')
  }
  render() {
    return (
      <Card className='right-list-card'>
        <Breadcrumb>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>权限管理</Breadcrumb.Item>
          <Breadcrumb.Item>权限列表</Breadcrumb.Item>
        </Breadcrumb>
        <Divider/>
        <Table 
          columns={this.state.rightColumns}
          dataSource={this.state.rightList}
          bordered
        >
        </Table>
      </Card>
    )
  }
}
